<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端粉丝列表页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #165DFF;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      
      /* 不同风格主题色 */
      --style1: #165DFF; /* 经典蓝 */
      --style2: #E91E63; /* 浪漫粉 */
      --style3: #38B2AC; /* 清新绿 */
      --style4: #2D3748; /* 商务灰 */
      --style5: #ED8936; /* 活力橙 */
      --style6: #6B46C1; /* 优雅紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 主页面容器 */
    .fans-page {
      display: none;
      min-height: 100vh;
    }
    
    .fans-page.active {
      display: block;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 18px 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-back {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 18px;
      cursor: pointer;
      margin-left: 15px;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 12px 20px;
      background-color: var(--light);
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 14px;
      background-color: var(--white);
      box-sizing: border-box;
    }
    
    .search-icon {
      position: absolute;
      left: 35px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--secondary);
      font-size: 16px;
    }
    
    /* 分类标签 */
    .tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .tabs::-webkit-scrollbar {
      display: none;
    }
    
    .tab-item {
      padding: 15px 20px;
      font-size: 15px;
      font-weight: 500;
      color: var(--secondary);
      white-space: nowrap;
      cursor: pointer;
      position: relative;
    }
    
    .tab-item.active {
      color: var(--primary);
    }
    
    .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    /* 粉丝列表 */
    .fans-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .fan-item {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--white);
    }
    
    .fan-info {
      display: flex;
      align-items: center;
    }
    
    .fan-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 15px;
      border: 2px solid transparent;
    }
    
    .fan-details {
      display: flex;
      flex-direction: column;
    }
    
    .fan-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .fan-meta {
      font-size: 12px;
      color: var(--secondary);
    }
    
    .fan-action {
      padding: 6px 15px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: 1px solid var(--primary);
      color: var(--primary);
      background-color: transparent;
    }
    
    .fan-action.following {
      background-color: var(--primary);
      color: white;
    }
    
    .fan-action:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: var(--secondary);
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：经典蓝 - 标准列表 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .fan-item:hover {
      background-color: rgba(22, 93, 255, 0.02);
    }
    
    .style-1 .verified {
      color: var(--primary);
      margin-left: 5px;
      font-size: 14px;
    }
    
    /* 风格2：浪漫粉 - 卡片式 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .fans-list {
      padding: 10px;
    }
    
    .style-2 .fan-item {
      margin-bottom: 10px;
      border-radius: 12px;
      border: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .style-2 .page-header {
      background: linear-gradient(135deg, #F48FB1, #E91E63);
      color: white;
      border-bottom: none;
    }
    
    .style-2 .header-back,
    .style-2 .header-btn {
      color: white;
    }
    
    .style-2 .tab-item.active {
      color: var(--primary);
    }
    
    /* 风格3：清新绿 - 简约风格 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .container {
      background-color: #f7fafc;
    }
    
    .style-3 .fan-item {
      background-color: transparent;
      border-bottom-color: #e2e8f0;
    }
    
    .style-3 .fan-avatar {
      border-radius: 8px;
    }
    
    .style-3 .search-bar {
      background-color: transparent;
      padding: 12px 20px 8px;
    }
    
    .style-3 .search-input {
      background-color: rgba(255, 255, 255, 0.8);
    }
    
    .style-3 .fan-meta {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .style-3 .common-friends {
      display: flex;
    }
    
    .style-3 .common-friends img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-left: -5px;
      border: 1px solid white;
    }
    
    .style-3 .common-friends img:first-child {
      margin-left: 0;
    }
    
    /* 风格4：商务灰 - 专业风格 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .page-title {
      font-weight: 700;
    }
    
    .style-4 .fan-item {
      padding: 18px 20px;
    }
    
    .style-4 .fan-avatar {
      width: 55px;
      height: 55px;
    }
    
    .style-4 .fan-position {
      font-size: 13px;
      color: var(--dark);
      margin-top: 3px;
    }
    
    .style-4 .fan-action {
      border-radius: 6px;
      padding: 8px 18px;
      font-weight: 600;
    }
    
    .style-4 .tabs {
      border-bottom: 1px solid #e2e8f0;
    }
    
    /* 风格5：活力橙 - 标签式 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .fan-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 5px;
    }
    
    .style-5 .fan-tag {
      background-color: rgba(237, 137, 54, 0.1);
      color: var(--primary);
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
    }
    
    .style-5 .fan-avatar.highlight {
      border-color: var(--primary);
    }
    
    .style-5 .tab-item {
      padding: 15px 25px;
    }
    
    .style-5 .search-input {
      border-radius: 20px;
    }
    
    /* 风格6：优雅紫 - 高级感 */
    .style-6 {
      --primary: var(--style6);
    }
    
    .style-6 .container {
      background-color: #FAF5FF;
    }
    
    .style-6 .fan-item {
      border-radius: 16px;
      margin: 10px;
      padding: 18px;
      border: none;
      background-color: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .style-6 .fan-avatar {
      width: 58px;
      height: 58px;
      box-shadow: 0 2px 8px rgba(107, 70, 193, 0.1);
    }
    
    .style-6 .fan-action {
      background-color: rgba(107, 70, 193, 0.1);
      border-color: transparent;
    }
    
    .style-6 .fan-action.following {
      background-color: var(--primary);
    }
    
    .style-6 .page-header {
      border-bottom: none;
      padding: 25px 20px 15px;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 加载更多 */
    .load-more {
      padding: 20px;
      text-align: center;
    }
    
    .load-more-btn {
      padding: 10px 25px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background-color: var(--white);
      color: var(--secondary);
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .fan-avatar {
        width: 45px;
        height: 45px;
      }
      
      .fan-action {
        padding: 5px 12px;
        font-size: 13px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择粉丝列表样式</div>
    <div class="switcher-option active" data-style="1">经典蓝</div>
    <div class="switcher-option" data-style="2">浪漫粉</div>
    <div class="switcher-option" data-style="3">清新绿</div>
    <div class="switcher-option" data-style="4">商务灰</div>
    <div class="switcher-option" data-style="5">活力橙</div>
    <div class="switcher-option" data-style="6">优雅紫</div>
  </div>
  
  <div class="container">
    <!-- 风格1：经典蓝 - 标准列表 -->
    <div class="fans-page active" id="page1">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">我的粉丝 (1,248)</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-filter"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索粉丝...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部</div>
        <div class="tab-item">互相关注</div>
        <div class="tab-item">新粉丝</div>
        <div class="tab-item">已认证</div>
      </div>
      
      <ul class="fans-list">
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div>
                <span class="fan-name">张小明</span>
                <i class="fa fa-check-circle verified"></i>
              </div>
              <div class="fan-meta">3小时前关注</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">李雨晴</div>
              <div class="fan-meta">昨天关注 · 共同好友 12</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div>
                <span class="fan-name">王建国</span>
                <i class="fa fa-check-circle verified"></i>
              </div>
              <div class="fan-meta">3天前关注 · 来自推荐</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/177/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">陈思远</div>
              <div class="fan-meta">1周前关注 · 共同好友 5</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">赵晓阳</div>
              <div class="fan-meta">2周前关注</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
      </ul>
      
      <div class="load-more">
        <button class="load-more-btn">加载更多</button>
      </div>
    </div>
    
    <!-- 风格2：浪漫粉 - 卡片式 -->
    <div class="fans-page" id="page2">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">我的粉丝 (856)</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-pencil"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索粉丝...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部粉丝</div>
        <div class="tab-item">亲密好友</div>
        <div class="tab-item">最近互动</div>
      </div>
      
      <ul class="fans-list">
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/55/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">林婉儿</div>
              <div class="fan-meta">喜欢美食、旅行 · 在线</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">李雨晴</div>
              <div class="fan-meta">时尚博主 · 30分钟前活跃</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">张小明</div>
              <div class="fan-meta">摄影爱好者 · 昨天活跃</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/26/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">刘梦琪</div>
              <div class="fan-meta">美妆达人 · 3天前活跃</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/24/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">孙雨桐</div>
              <div class="fan-meta">设计师 · 1周前活跃</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
      </ul>
      
      <div class="load-more">
        <button class="load-more-btn">加载更多</button>
      </div>
    </div>
    
    <!-- 风格3：清新绿 - 简约风格 -->
    <div class="fans-page" id="page3">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">粉丝 (2,351)</h1>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="查找粉丝">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部</div>
        <div class="tab-item">关注我</div>
        <div class="tab-item">我关注</div>
      </div>
      
      <ul class="fans-list">
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">王建国</div>
              <div class="fan-meta">
                <span>2小时前</span>
                <div class="common-friends">
                  <img src="https://picsum.photos/id/64/100/100" alt="共同好友">
                  <img src="https://picsum.photos/id/65/100/100" alt="共同好友">
                </div>
              </div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">张小明</div>
              <div class="fan-meta">
                <span>1天前</span>
                <div class="common-friends">
                  <img src="https://picsum.photos/id/91/100/100" alt="共同好友">
                </div>
              </div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/177/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">陈思远</div>
              <div class="fan-meta">
                <span>3天前</span>
                <div class="common-friends">
                  <img src="https://picsum.photos/id/64/100/100" alt="共同好友">
                  <img src="https://picsum.photos/id/65/100/100" alt="共同好友">
                  <img src="https://picsum.photos/id/91/100/100" alt="共同好友">
                </div>
              </div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">赵晓阳</div>
              <div class="fan-meta">
                <span>1周前</span>
              </div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
      </ul>
      
      <div class="load-more">
        <button class="load-more-btn">加载更多</button>
      </div>
    </div>
    
    <!-- 风格4：商务灰 - 专业风格 -->
    <div class="fans-page" id="page4">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">粉丝列表 (3,752)</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索联系人或公司">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部粉丝</div>
        <div class="tab-item">行业伙伴</div>
        <div class="tab-item">潜在客户</div>
        <div class="tab-item">已合作</div>
      </div>
      
      <ul class="fans-list">
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">王建国</div>
              <div class="fan-position">产品总监 @ 科技公司</div>
              <div class="fan-meta">关注于 2023-05-12 · 查看资料</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">张小明</div>
              <div class="fan-position">创始人 @ 创业公司</div>
              <div class="fan-meta">关注于 2023-06-28 · 查看资料</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/177/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">陈思远</div>
              <div class="fan-position">营销总监 @ 品牌公司</div>
              <div class="fan-meta">关注于 2023-08-05 · 查看资料</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/55/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">林婉儿</div>
              <div class="fan-position">设计师 @ 创意机构</div>
              <div class="fan-meta">关注于 2023-09-17 · 查看资料</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
      </ul>
      
      <div class="load-more">
        <button class="load-more-btn">查看更多粉丝</button>
      </div>
    </div>
    
    <!-- 风格5：活力橙 - 标签式 -->
    <div class="fans-page" id="page5">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">我的粉丝 (1,587)</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-star-o"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索粉丝...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部</div>
        <div class="tab-item">兴趣相投</div>
        <div class="tab-item">活跃粉丝</div>
        <div class="tab-item">星标粉丝</div>
      </div>
      
      <ul class="fans-list">
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="fan-avatar highlight">
            <div class="fan-details">
              <div class="fan-name">赵晓阳</div>
              <div class="fan-meta">美食博主 · 今日互动</div>
              <div class="fan-tags">
                <span class="fan-tag">美食</span>
                <span class="fan-tag">旅行</span>
                <span class="fan-tag">摄影</span>
              </div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">李雨晴</div>
              <div class="fan-meta">时尚达人 · 3天前互动</div>
              <div class="fan-tags">
                <span class="fan-tag">时尚</span>
                <span class="fan-tag">穿搭</span>
              </div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">张小明</div>
              <div class="fan-meta">摄影爱好者 · 1周前互动</div>
              <div class="fan-tags">
                <span class="fan-tag">摄影</span>
                <span class="fan-tag">户外</span>
              </div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/55/200/200" alt="用户头像" class="fan-avatar highlight">
            <div class="fan-details">
              <div class="fan-name">林婉儿</div>
              <div class="fan-meta">插画师 · 2周前互动</div>
              <div class="fan-tags">
                <span class="fan-tag">艺术</span>
                <span class="fan-tag">插画</span>
                <span class="fan-tag">设计</span>
              </div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
      </ul>
      
      <div class="load-more">
        <button class="load-more-btn">加载更多</button>
      </div>
    </div>
    
    <!-- 风格6：优雅紫 - 高级感 -->
    <div class="fans-page" id="page6">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">粉丝 (956)</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-sliders"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索粉丝...">
      </div>
      
      <div class="tabs">
        <div class="tab-item active">全部</div>
        <div class="tab-item">创作者</div>
        <div class="tab-item">收藏家</div>
      </div>
      
      <ul class="fans-list">
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/55/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">林婉儿</div>
              <div class="fan-meta">插画师 · 作品 128</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">李雨晴</div>
              <div class="fan-meta">时尚博主 · 作品 356</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">赵晓阳</div>
              <div class="fan-meta">美食摄影师 · 作品 421</div>
            </div>
          </div>
          <button class="fan-action following">已关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">张小明</div>
              <div class="fan-meta">旅行博主 · 作品 248</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
        
        <li class="fan-item">
          <div class="fan-info">
            <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="fan-avatar">
            <div class="fan-details">
              <div class="fan-name">王建国</div>
              <div class="fan-meta">科技作家 · 作品 156</div>
            </div>
          </div>
          <button class="fan-action">关注</button>
        </li>
      </ul>
      
      <div class="load-more">
        <button class="load-more-btn">加载更多</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const fansPages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 初始化标签切换
      initTabs();
      
      // 初始化关注按钮
      initFollowButtons();
    }
    
    // 初始化标签切换功能
    function initTabs() {
      document.querySelectorAll('.tab-item').forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除同组所有标签的active类
          const tabContainer = this.parentElement;
          tabContainer.querySelectorAll('.tab-item').forEach(item => {
            item.classList.remove('active');
          });
          
          // 给当前点击的标签添加active类
          this.classList.add('active');
        });
      });
    }
    
    // 初始化关注按钮功能
    function initFollowButtons() {
      document.querySelectorAll('.fan-action').forEach(button => {
        button.addEventListener('click', function() {
          if (this.classList.contains('following')) {
            this.classList.remove('following');
            this.textContent = '关注';
          } else {
            this.classList.add('following');
            this.textContent = '已关注';
          }
        });
      });
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(fansPages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      fansPages[style].classList.add('active');
    }
    
    // 键盘导航
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowLeft') {
        let prev = currentStyle - 1;
        if (prev < 1) prev = 6;
        switchStyle(prev);
      } else if (e.key === 'ArrowRight') {
        let next = currentStyle + 1;
        if (next > 6) next = 1;
        switchStyle(next);
      }
    });
    
    // 启动
    init();
  </script>
</body>
</html>
